<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逗游吧后台框架</title>
    <% include ../include/docs-link %>
</head>
<body class="wrapper-body">
<% include ../include/docs-header %>
<div class="wrapper-container">
    <div class="container-fluid">
        <div class="row no-gutter">
            <div class="col-2">
                <% include ../include/docs-nav %>
            </div>
            <div class="col-10">
                <div class="wrapper-content">
                    <article class="wrapper-article">
                        <h1>Radio 单选框</h1>
                        <div class="anchor">
                            <h2 id="概述">概述</h2>
                            <a href="#概述">#</a>
                        </div>
                        <p>基本组件-单选框。主要用于一组可选项单项选择，或者单独用于切换到选中状态。</p>
                        <div class="anchor">
                            <h2 id="基础用法">基础用法</h2>
                            <a href="#基础用法">#</a>
                        </div>
                        <div class="example">
                            <div class="example-case">
                                <label class="radio-group">
                                    <input type="radio" /><span class="radio-custom-label">备选项</span>
                                </label>
                            </div>
                            <div class="example-code">
    <pre><code class="html">
    &lt;label class="radio-group"&gt;
        &lt;input type="radio" /&gt;&lt;span class="radio-custom-label"&gt;备选项&lt;/span&gt;
    &lt;/label&gt;
    </code></pre>
                            </div>
                            <div class="example-code-more">
                                <i class="glyphicon glyphicon-triangle-bottom"></i>
                                <span>Show Code</span>
                            </div>
                        </div>
                        <div class="anchor">
                            <h2 id="禁用状态">禁用状态</h2>
                            <a href="#禁用状态">#</a>
                        </div>
                        <div class="example">
                            <div class="example-case">
                                <label class="radio-group">
                                    <input type="radio" disabled="true" /><span class="radio-custom-label">备选项</span>
                                </label>
                                <label class="radio-group">
                                    <input type="radio" disabled="true" checked /><span class="radio-custom-label">备选项</span>
                                </label>
                            </div>
                            <div class="example-code">
    <pre><code class="html">
    &lt;label class="radio-group"&gt;
        &lt;input type="radio" disabled="true" /&gt;&lt;span class="radio-custom-label"&gt;备选项&lt;/span&gt;
    &lt;/label&gt;
    &lt;label class="radio-group"&gt;
        &lt;input type="radio" disabled="true" checked /&gt;&lt;span class="radio-custom-label"&gt;备选项&lt;/span&gt;
    &lt;/label&gt;
    </code></pre>
                            </div>
                            <div class="example-desc">
                                为input元素添加 disabled 属性即可禁用状态
                            </div>
                            <div class="example-code-more">
                                <i class="glyphicon glyphicon-triangle-bottom"></i>
                                <span>Show Code</span>
                            </div>
                        </div>
                        <div class="anchor">
                            <h2 id="单选框组">单选框组</h2>
                            <a href="#单选框组">#</a>
                        </div>
                        <div class="example">
                            <div class="example-case">
                                <label class="radio-group">
                                    <input type="radio" name="city" /><span class="radio-custom-label">复选框 A</span>
                                </label>
                                <label class="radio-group">
                                    <input type="radio" name="city" /><span class="radio-custom-label">复选框 B</span>
                                </label>
                                <label class="radio-group">
                                    <input type="radio" name="city" disabled /><span class="radio-custom-label">复选框 C</span>
                                </label>
                                <label class="radio-group">
                                    <input type="radio" name="city" disabled checked /><span class="radio-custom-label">复选框 D</span>
                                </label>
                            </div>
                            <div class="example-code">
    <pre><code class="html">
    &lt;label class="radio-group"&gt;
        &lt;input type="radio" checked /&gt;&lt;span class="radio-custom-label"&gt;复选框 A&lt;/span&gt;
    &lt;/label&gt;
    &lt;label class="radio-group"&gt;
        &lt;input type="radio" /&gt;&lt;span class="radio-custom-label"&gt;复选框 B&lt;/span&gt;
    &lt;/label&gt;
    &lt;label class="radio-group"&gt;
        &lt;input type="radio" disabled /&gt;&lt;span class="radio-custom-label"&gt;复选框 C&lt;/span&gt;
    &lt;/label&gt;
    &lt;label class="radio-group"&gt;
        &lt;input type="radio" /&gt;&lt;span class="radio-custom-label"&gt;复选框 D&lt;/span&gt;
    &lt;/label&gt;
    </code></pre>
                            </div>
                            <div class="example-code-more">
                                <i class="glyphicon glyphicon-triangle-bottom"></i>
                                <span>Show Code</span>
                            </div>
                        </div>
                    </article>
                </div>
            </div>
        </div>
    </div>
</div>
<% include ../include/docs-footer %>
</body>
</html>